import { Timer, UserFilled } from '@element-plus/icons-vue';
import { ElIcon } from 'element-plus';
import {defineComponent, onMounted, onUnmounted, ref} from 'vue';
import Style from './1080.module.scss';
import {useRouter} from "vue-router";
import router from "@/router";
import {useBreadcrumbStore} from "@/store/modules/breadcrumb";

export const UserInfo = defineComponent({
    setup() {

        const timeLeft = ref(58); // 倒计时时间
        const router = useRouter(); // 获取路由对象
        const title =router.currentRoute.value.meta.title;
        const breadcrumbStore = useBreadcrumbStore(); // 实例化Pinia存储
        let countdownTimer: NodeJS.Timeout | null = null;

        const startCountdown = () => {
            countdownTimer = setInterval(() => {
                if (timeLeft.value > 0) {
                    timeLeft.value--;
                } else {
                    clearInterval(countdownTimer!);
                    breadcrumbStore.clearTitleArray(); // 清空面包屑数组
                    router.push('/HomePage'); // 倒计时结束后跳转到HomePage页面
                }
            }, 1000);
        };

        onMounted(() => {
            startCountdown();
        });


        onUnmounted(() => {
            if (countdownTimer) {
                clearInterval(countdownTimer);
            }
        });

        const userName = ref('张三芬');
        const getMaskedName = (name: string) => {
            if (name && name.length > 1) {
                return name.charAt(0) + '*' + name.slice(2);
            }
            return '未知';
        };


        const step = ref(6);

        const stepList = ref([
            {
                id:1,
                title: "预约挂号"
            },
            {
                id:2,
                title: "物价查询"
            },
            {
                title: "选择科室"
            },
            {
                title: "选择医生"
            },
            {
                title: "选择号源"
            },
            {
                title: "确认信息"
            },
            {
                title: "领取凭条"
            }
        ]);

        return () => (<>
            <div class={Style.top}>
                <div class={Style.title}>
                    {title}
                </div>

                <div class={Style.tips}>
                    <ElIcon>
                        <Timer></Timer>
                    </ElIcon>
                    <div class={Style.tips_text1}>
                        {timeLeft.value} 秒
                    </div>


                    <ElIcon>
                        <UserFilled></UserFilled>
                    </ElIcon>
                    <div class={Style.tips_text2}>
                        {getMaskedName(userName.value)}
                    </div>
                </div>
            </div>
        </>);
    }
})
